<template>
	<view class="container">
		<view class="bg"></view>
		<uni-forms ref="form" :rules="rules">
				<uni-card title="商户信息">
					<uni-forms-item label="商户名称" required>
						<uni-easyinput  
						v-model="form.busiName" 
						placeholder="请输入商户名称" 
						type="text"
						:clearable="false"
						/>
					</uni-forms-item>
					<uni-forms-item label="身份证号" required>
						<uni-easyinput  
						v-model="form.busiUsernumber" 
						placeholder="请输入开户身份证号" 
						type="idcard" 
						:clearable="false"
						maxlength="22"
						/>
					</uni-forms-item>
					<uni-forms-item label="开户名" required>
						<uni-easyinput  
						v-model="form.busiUsername" 
						placeholder="请输入开户名" 
						type="text"
						:clearable="false"
					 />
					</uni-forms-item>
					 <uni-forms-item label="地址" required>
					 	<pickerAddress @change="selectAddress">
					 		<uni-easyinput v-model="form.province" placeholder="请输入省份" type="text" :clearable="false" />
					 
					 		<uni-easyinput v-model="form.city" placeholder="请输入市" type="text" :clearable="false" />
					 		
					 		<uni-easyinput v-model="form.address" placeholder="请输入区" type="text" :clearable="false" />
					 	</pickerAddress>
					 </uni-forms-item>
				
					<uni-forms-item label="详细地址"required>
						<uni-easyinput  
						v-model="form.district" 
						placeholder="请输入详细地址"
						type="text"
						:clearable="false"
					/>
					</uni-forms-item>
					<uni-forms-item label="手机号" required>
						<uni-easyinput  
						v-model="form.phone" 
						placeholder="请输入手机号"
						maxlength="11"
						type="number"
						:clearable="false"
					/>
					</uni-forms-item>
					<uni-forms-item label="身份证正面照" required>
						<UploadImageFile @uploadFile="idcardFront"></UploadImageFile>
					</uni-forms-item>
					<uni-forms-item label="身份证反面照" required>
						<UploadImageFile @uploadFile="idcardReverse"></UploadImageFile>
					</uni-forms-item>
					<uni-forms-item label="商家手持身份证照片" required>
						<UploadImageFile @uploadFile="handIdcard"></UploadImageFile>
					</uni-forms-item>
					<uni-forms-item label="营业执照" required>
						<UploadImageFile @uploadFile="businessLicense"></UploadImageFile>
					</uni-forms-item>
					<text>营业执照</text>
					<uni-forms-item label="门头照" required>
						<UploadImageFile @uploadFile="facade"></UploadImageFile>
					</uni-forms-item>
				</uni-card>
			</uni-forms-item>
		</uni-forms>
		
		<view class="submit-style">
			<button type="primary" @click="submitForm">提交</button>
		</view>
	</view>
	
</template>

<script>
	import {getToken} from "../../apis/myCookie.js"
	import {addBusiness} from "../../apis/business.js"
	import UploadImageFile from "./components/uploadImageFile.vue"
	import pickerAddress from "../../components/wangding-pickerAddress/wangding-pickerAddress.vue"
	export default {
		components:{
			UploadImageFile,
			pickerAddress,
		},
		data() {
			return {
				form: {
					busiName:'',
					busiUsernumber:'',
					busiUsername:'',
					province:'',
					city:'',
					address:'',
					district:'',
					phone:'',
				},
				txt:"选择地址",
				rules:{
					busiName:{
						rules:[{
							required:true,
							errorMessage:"商户名不能为空"
						}]
					},
					busiUsernumber:{
						rules:[{
							required:true,
							errorMessage:"身份证号不能为空"
						}]
					},
					busiUsername:{
						rules:[{
							required:true,
							errorMessage:"开户名不能为空"
						}]
					},
					province:{
						rules:[{
							required:true,
							errorMessage:"省不能为空"
						}]
					},
					city:{
						rules:[{
							required:true,
							errorMessage:"市不能为空"
						}]
					},
					address:{
						rules:[{
							required:true,
							errorMessage:"区不能为空"
						}]
					},
					district:{
						rules:[{
							required:true,
							errorMessage:"详细地址不能为空"
						}]
					},
					phone:{
						rules:[{
							required:true,
							errorMessage:"电话号不能为空"
						}]
					}
				}
			}
		},
		methods: {
			selectAddress(data) {
				this.txt = data.data;
				this.form.province = data.data[0];
				this.form.city =  data.data[1];
				this.form.address =  data.data[2];
				console.log(this.form);
				// console.log(data);
				// console.log(this.form.province);
				// console.log(this.form.city);
				// console.log(this.form.address)
			},
			submitForm() {
				addBusiness(this.form).then(res =>{
					wx.showToast({
						title:"提交成功",
						icon:"success",
					});
				}) 
			},
			idcardFront(val){
				// console.log(val),
				this.form.idcardFront = val;
				// console.log(this.form)
			},
			idcardReverse(val){
				this.form.idcardReverse = val;
			},
			handIdcard(val){
				this.form.handIdcard = val;
			},
			businessLicense(val){
				this.form.businessLicense = val;
			},
			facade(val){
				this.form.facade = val;
			}
		},
	}
</script>	

<style>
	.container{
	    padding: 0%;
	}
	.submit-style{
		width: 120px;
		height: 20px;
		margin: 20px;
	}
	.bg{
		position: fixed;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		z-index: -1;
		background-color: #f8f8f8;
	}
	.inputBorder{
		width: auto;
		height: 60rpx; 
		/* border-color:#e5e5e5; */
		border-radius: 8rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: row;
		align-items: center;
		border: 1rpx solid #e5e5e5;
		padding-left: 10rpx;
	}
</style>
